<template>
	<view >
		<view class="warp-tabbar bg-color-w flex" :style="{'padding-bottom': isIphonex ? '34px' : ''}">
			<view v-if="isWorkShow(index)" @click="goTab(item.pagePath)" v-for="(item,index) in list" class="flex flex-1 f-c f-a-c f-j-c p-r">
				<text v-if="index == 1 && len > 0"
					class="flex f-a-c f-j-c box-b f11-size t-color-w bg-color-r wrap-len b-radius padding-lr2 h-16"
					style="min-width: 16px;">{{len}}</text>
				<image class="w-24 margin-t2" :src="index == active ? item.selectedIconPath : item.iconPath" mode="widthFix"></image>
				<text class="f12-size f-w-500" :class="index == active ? 't-color-b' : 't-color-6'">{{item.text}}</text>
			</view>
		</view>
		<view v-if="isShow" :style="{'padding-bottom': isIphonex ? '94px' : '60px'}"></view>
	</view>
</template>
<style scoped>
	.wrap-login {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		transform: translateY(-100%);
		background-color: rgba(0,0,0,0.6);
	}
	.warp-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0px -1px 10px 0px rgba(188, 188, 188, 0.5);
		border-radius: 0px 0px 0px 0px;
		box-sizing: content-box;
		z-index: 1111;
	}
	.wrap-len {
		position: absolute;
		left: 44px;
		top: 3px;
		z-index: 1;
	}
</style>
<script>
	const API = require('../../utils/api/user.js').default;
	const $ = require('../../utils/api.js');
	let count = 0;
	export default {
		props: {
			isShow: { type: Boolean, default: true },
		},
		data() {
			return {
				"isIphonex": uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				"list": [],
				len: 0,
				isLogin: uni.getStorageSync('token') ? true : false,
				active: 0,
			};
		},
		onLoad: function() {
			uni.hideTabBar();
			this.init();
		},
		onShow() {
			// this.getChatLen();
		},
		methods: {
			isWorkShow(index) {//判断工作台是否有权限
				if(index == 0 || index == 3) {return true}
				if(index == 1) {
					if(index== 1 && this.hasRoles(this.roles.tradeSignBtn) || this.hasRoles(this.roles.tradeAloneBtn) || this.hasRoles(this.roles.workTransportBtn) || this.hasRoles(this.roles.tradeSpecialBtn)) {
						return true
					}
				}
				if(index== 2 && this.hasRoles(this.roles.workRepairsBtn) || this.hasRoles(this.roles.workReplaceBtn) || this.hasRoles(this.roles.workTransportBtn) || this.hasRoles(this.roles.workProjectBtn)) {
					return true
				}
				return false
			},
			goTab(url) {
				uni.switchTab({
					url: '/'+url
				})
			},
			init() {
				const self = this;
				let arr = [
					{
						"pagePath": "pages/index/index",
						"iconPath": "/static/images/tab_index.png",
						"selectedIconPath": "/static/images/tab_index_on.png",
						"text": "勤务"
					},
					{
						"pagePath": "pages/trade/index",
						"iconPath": "/static/images/tab_trade.png",
						"selectedIconPath": "/static/images/tab_trade_on.png",
						"text": "贸易"
					},
					{
						"pagePath": "pages/work/index",
						"iconPath": "/static/images/tab_work.png",
						"selectedIconPath": "/static/images/tab_work_on.png",
						"text": "工作台"
					},
					{
						"pagePath": "pages/user/index",
						"iconPath": "/static/images/tab_user.png",
						"selectedIconPath": "/static/images/tab_user_on.png",
						"text": "我的"
					}
				];
				self.list = arr;
				this.getActive();
			},
			getActive() {
				let pages = getCurrentPages(); // 当前页面
				let beforePage = pages[pages.length - 1]; // 前一个页面
				this.list.forEach((ele,index) => {
					if(ele.pagePath == beforePage.route) {
						this.active = index;
					}
				})
			},


		},
		computed: {},
		created() {
			this.init();
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
